<template>
  <div class="app-container">
    <div class="header">
      <div class="word">
        <div class="w1">
          目检诊断系统
        </div>
        <div class="w2">
          在目检诊断系统中你可以根据具体的肉桂病症状态，初步的查询有可能的肉桂病症并且查看治疗方法，实现对肉桂病症的判断
        </div>
        <div class="w2">
          疾目检诊断系统是病虫害防治中重要的一环,它可以为我们提供肉桂病症的治疗方法，为肉桂的防治做准备。
        </div>
      </div>
      <img class="imgDri" src="../static/u=255011316,29501695&fm=253&fmt=auto&app=138&f=JPEG.webp">
    </div>
    <div class="searchHead">
      <div class="headSearch">
        病虫害部位: <el-select v-model="vaPlace" placeholder="请选择">
          <el-option v-for="item in dePlace" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="headSearch">
        病虫害类型: <el-select v-model="vaType" placeholder="请选择">
          <el-option v-for="item in deType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="headSearch">
        病虫害症状: <el-input v-model="deFeature" style="width: 200px;" placeholder="请输入内容" />
      </div>
      <div class="headSearch">
        <el-button type="info" plain @click="searchMeasure()">诊断</el-button>
      </div>
    </div>
    <el-table :data="mes" type="" style="width: 100%">
      <el-table-column label="图片" width="180">
        <template slot-scope="scope">
          <img :src="mes[scope.$index].picture" class="img2">
        </template>
      </el-table-column>
      <el-table-column prop="commonName" label="病虫害名" width="180" />
      <el-table-column prop="diseasePlace" label="病虫害部位" width="180" />
      <el-table-column prop="type" label="类型" width="180" />
      <el-table-column prop="mainSymptom" label="主要症状" />
      <el-table-column prop="briefIntro" label="简介" />
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" @click="meaSureChan(scope.$index)">查看处方</el-button>
          <el-dialog
            :modal-append-to-body="false"
            title="查看处方"
            :visible.sync="mes[scope.$index].isShowCh"
            width="30%"
          >
            <div class="form">
              <template v-for="(item, i) in meaSureMes">
                <div :key="i">
                  <div class="p">处方{{ i + 1 }}</div>
                  <div class="qw">{{ item.measure }}</div>
                  <el-divider />
                </div>
              </template>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="mes[scope.$index].isShowCh = false">取 消</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import request from '../../../utils/request'

export default {
  name: 'VisualDiagnosis',

  data() {
    return {
      deFeature: '',
      mes: [],
      deName: '',
      vaType: '',
      vaPlace: '',
      meaSureMes: [],
      deType: [{
        value: '虫害',
        label: '虫害'
      }, {
        value: '病害',
        label: '病害'
      }, {
        value: '生理病害',
        label: '生理病害'
      }, {
        value: '草害',
        label: '草害'
      }, {
        value: '天敌',
        label: '天敌'
      }],
      vType: '',
      dePlace: [{
        value: '根',
        label: '根'
      }, {
        value: '茎',
        label: '茎'
      }, {
        value: '叶',
        label: '叶'
      }, {
        value: '树干',
        label: '树干'
      }, {
        value: '枝',
        label: '枝'
      }, {
        value: '果',
        label: '果'
      }
      ]
    }
  },
  methods: {
    async searchMeasure() {
      const data = {
        'diseasePlace': this.vaPlace,
        'scientificName': this.deName,
        'type': this.deFeature
      }
      console.log(data)
      await request({
        url: '/pad/characteristic/pageCharacterByLabel/1/100',
        method: 'post',
        data: data
      }).then(response => {
        if (response.statusCode == 20000) {
          console.log(response)
          this.mes = response.data.records
          for (let i = 0; i < this.mes.length; i++) {
            this.$set(this.mes[i], 'isShowCh', false)
          }
          if (response.data.total == '0') {
            this.$message({
              message: '无此种病虫害数据，请前去添加',
              type: 'warning'
            })
          }
          if (response.data.total != '0') {
            this.$message({
              message: '查询成功',
              type: 'success'
            })
          }
        } else {
          this.$message({
            message: '发生错误，修改失败',
            type: 'warning'
          })
        }
      })
    },
    async meaSureGet(index) {
      console.log(this.mes[index].diseaseId, index)
      await request({
        url: '/pad/measure/getByCharacterId/' + this.mes[index].diseaseId,
        method: 'get'
      }).then(response => {
        if (response.statusCode == 20000) {
          this.meaSureMes = response.data
          if (this.meaSureMes.length != 0) {
            this.mes[index].isShowCh = true
          } else {
            this.$message({
              message: '暂未有处方，请前往病虫害预览添加',
              type: 'warning'
            })
          }
          console.log(this.meaSureMes)
        } else {
          this.$message({
            message: '发生错误，打开失败',
            type: 'warning'
          })
        }
      })
    },
    meaSureChan(index) {
      this.meaSureGet(index)
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
    width: 100%;
    height: 350px;
    // border: 1px solid black;
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
}

.imgDri {
    height: 300px;
    width: 400px;
}

.w1 {
    height: 80px;
    font-size: 25px;
    font-weight: 350;
}

.w2 {
    height: 50px;
    font-size: 15px;
    font-weight: 250;
}

.searchHead {
    display: flex;
    justify-content: space-around;
    background-color: #f3f3f3;
    height: 80px;
    align-items: center;
    border-radius: 20px;
    margin-bottom: 5px;
}
.qw{
    margin-left: 30px;
    border: 1px solid #6b7070;
    font-weight: 500;
    font-size: 16px;
    width: 500px;
    margin-top: 5px;
}
.img2{
  width: 100px;
  height: 100px;
}
</style>
